<template>
    <div>
        <!-- 登录注册 -->
        <div class="header">
            <div class="img-con">
                <img src="@/assets/image/xia.jpg" alt="网络繁忙">
            </div>
            <div class="login" @click="login">登录 &ensp;/</div>
            <div class="register" @click="register">&ensp;注册</div>
        </div>
        <!-- 列表 -->
        <div class="body">
            <div class="list">
            <span>我的会员</span>
            <span class="word">开通会员&ensp;></span>
            </div>
            <div class="list">
                <span>书豆</span>
                <span class="word">充值&ensp;></span>
            </div>
            <div class="list">
                <span>消费充值记录</span>
                <span class="word">></span></div>
            <div class="list">
                <span>购买过的书</span>
                <span class="word">&ensp;></span></div>
            <div class="list">
                <span>意见反馈</span>
                <span class="word">ID：8000000&ensp;></span></div>
        </div>
    </div>
</template>

<script>
export default {
  methods: {
    login () {
      this.$router.push({
        path: '/login',
        query: {
          goto: this.$route.fullPath
        }
      })
    },
    register () {
      this.$router.push({
        path: '/register',
        query: {
          goto: this.$route.fullPath
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.header{
    margin:12px 0 16px;
    height: 124px;
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    display: flex;
    line-height: 124px;
    font-weight: 900;
    font-size: 18px;
    .img-con{
    width:  60px;
    height: 60px;
    line-height: 60px;
    margin: 32px 16px;
    img{
        width: 100%;
        height: 100%
    }
}
}
.body{
    .list{
        height: 63px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:0 10px;
        .word{
            color: rgb(153, 153, 153);
        }
    }
}
</style>
